<template>
  <div class="upload">

    <div>
      <el-button
        v-if="downloadAddress"
        type="text"
        @click="handleDownload"
      >
        <i class="el-icon-download" />
        下载
      </el-button>
      <span v-else>{{ fallback }}</span>
    </div>

    <div v-if="isEditing" style="margin-left: 10px" @click="handleOpenDialog">
      <slot name="button">
        <el-button
          type="text"
        >
          <i class="el-icon-refresh" />
          更换
        </el-button>
      </slot>
    </div>

    <el-dialog
      :visible.sync="visible"
      title="上传"
      width="500px"
      @close="handleClose"
    >
      <div class="upload-containers">
        <div class="upload-containers__box">
          <el-upload
            ref="elUploadRef"
            :limit="1"
            drag
            :action="baseUrl + 'api/v1/upload/file'"
            :data="formData"
            :before-upload="beforeUpload"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div v-if="$slots.tip" class="upload-tips">
            <slot name="tip" />
          </div>
        </div>

      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeUploadDialog">取 消</el-button>
        <el-button type="primary" @click="uploadDialogConfirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: '',
  props: {
    isEditing: {
      type: Boolean,
      default: false
    },
    onBeforeUpload: {
      type: Function,
      default: () => {}
    },
    // 哪个字段
    uploadField: {
      type: String,
      default: ''
    },
    fallback: {
      type: String,
      default: '-'
    },
    downloadAddress: {
      type: String,
      default: ''
    },
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      baseUrl: '',
      uploadResult: null,
      visibleToIdCard: false,
      sourceFile: null
    }
  },
  created() {
    this.baseUrl = process.env.VUE_APP_UPLOAD
  },
  methods: {
    handleOpenDialog() {
      this.visible = true
    },
    beforeUpload(e) {
      return this.onBeforeUpload(e)
    },
    handleSuccess(e, file) {
      this.sourceFile = file
      if (e.code === 200) this.$message.success('上传成功！')
      this.uploadResult = e
    },
    handleRemove(file, fileList) {
      this.$emit('onRemove', { field: this.uploadField, result: file })
    },
    uploadDialogConfirm() {
      this.$emit('onConfirm', {
        field: this.uploadField,
        result: this.uploadResult,
        file: this.sourceFile
      })
      this.visible = false
    },
    handleClose() {
      this.$refs?.elUploadRef?.clearFiles()
    },
    closeUploadDialog() {
      this.visible = false
    },
    handleDownload() {
      if (!this.downloadAddress) return
      window.open(this.downloadAddress)
    }
  }
}
</script>
<style lang="scss" scoped>
.upload {
  display: flex;
  justify-content: center;
}
.upload-containers {
  display: flex;
  justify-content: center;
  &__box {
    //flex: 1;
    width: 80%;
    margin: 0 10px;
    .upload-tips {
      padding: 10px 0;
    }
  }
}

.id-card-preview {
  display: flex;
  .img {
    flex: 1;
    height: 200px;
    margin: 0 10px;
    .el-image {
      width: 100%;
      height: 100%;

    }

  }
}
::v-deep(.error-img) {
  width: 100%;
  height: 100%;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .icon {
    font-size: 50px;
  }
}
</style>
